<template>
  <div class="app-container">
    <div class="head-container">
      <el-card>
        <div slot="header">
          <div style="display: flex;justify-content: space-between;">
            <div>已选择{{ select_table.length }}个容器</div>
            <div style="display: flex;gap: 10px;align-items: center;">
              <span>单据类型</span>
              <el-select v-model="orderType" style="width: 180px;" clearable placeholder="请选择优先级">
                <el-option
                  v-for="item in orderTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <span>优先级</span>
              <el-select v-model="priority" style="width: 180px;" clearable placeholder="请选择优先级">
                <el-option
                  v-for="item in priorityList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-button :loading="btn.create" type="primary" size="mini" icon="el-icon-tickets" :disabled="select_table.length === 0 || !priority || !orderType" @click="createDemandOrder">创建需求单</el-button>
            </div>
          </div>
        </div>
        <el-table
          ref="selectTable"
          :data="select_table"
          size="small"
          style="height: 300px;"
          max-height="300px"
        >
          <!-- <el-table-column type="selection" width="55" /> -->
          <el-table-column prop="materialBatch" label="物料批次号" />
          <el-table-column prop="materialCode" label="物料编号" />
          <el-table-column prop="materialDescription" label="物料描述" />
          <!-- <el-table-column prop="containerId" label="容器ID" /> -->
          <el-table-column prop="containerCode" label="容器编码" />
          <el-table-column prop="qty" label="数量" />
          <el-table-column prop="frozenStatus" label="冻结状态">
            <template slot-scope="scope">
              {{ dict.label.semi_frozen[scope.row.frozenStatus] }}
            </template>
          </el-table-column>
          <el-table-column prop="status" label="物料状态">
            <template slot-scope="scope">
              {{ dict.label.semi_material_status[scope.row.inventoryStatus] }}
            </template>
          </el-table-column>
          <!-- <el-table-column prop="startPullTime" label="开始接料时间" />
          <el-table-column prop="boxInboundTime" label="结箱入库时间" /> -->
          <el-table-column prop="sealCross" label="胶条截面" />
          <el-table-column prop="bladeHeight" label="刃高" />
          <el-table-column prop="shelfStatus" label="保质期状态">
            <template slot-scope="scope">
              {{ dict.label.semi_shelf_life_status[scope.row.shelfStatus] }}
            </template>
          </el-table-column>
          <el-table-column prop="weight" label="重量" />
          <el-table-column prop="productionDate" label="生产时间" />
          <el-table-column prop="inboundTime" label="入库时间" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="delItem(scope.row, scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-card>
        <div style="display: flex;flex-wrap: wrap;">
          <!-- 搜索 -->
          <label class="el-form-item-label">需求单据类型</label>
          <el-input v-model="query.type" clearable placeholder="需求单据类型" style="width: 185px;" class="filter-item" @keyup.enter.native="toQuery" />
          <label class="el-form-item-label">需求单编号</label>
          <el-input v-model="query.demandOrderNo" clearable placeholder="需求单编号" style="width: 185px;" class="filter-item" @keyup.enter.native="toQuery" />
          <label class="el-form-item-label">容器编码</label>
          <el-input v-model="query.containerCode" clearable placeholder="容器编码" style="width: 185px;" class="filter-item" @keyup.enter.native="toQuery" />
          <label class="el-form-item-label">储位编码</label>
          <el-input v-model="query.storageCode" clearable placeholder="储位编码" style="width: 185px;" class="filter-item" @keyup.enter.native="toQuery" />
          <label class="el-form-item-label">物料批次</label>
          <el-input v-model="query.materialBatch" clearable placeholder="物料批次" style="width: 185px;" class="filter-item" @keyup.enter.native="toQuery" />
          <label class="el-form-item-label">状态</label>
          <el-input v-model="query.status" clearable placeholder="状态" style="width: 185px;" class="filter-item" @keyup.enter.native="toQuery" />
          <label class="el-form-item-label">优先级</label>
          <el-input v-model="query.priority" clearable placeholder="优先级" style="width: 185px;" class="filter-item" @keyup.enter.native="toQuery" />
          <label class="el-form-item-label">入库时间</label>
          <el-date-picker
            v-model="query.inboundTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            class="filter-item"
            @change="toQuery"
          />
          <div style="display: flex;">
            <el-button size="mini" class="filter-item" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
            <el-button size="mini" class="filter-item" type="warning" icon="el-icon-refresh-right" @click="reset">重置</el-button>
          </div>
        </div>
        <el-table
          ref="table"
          v-loading="loading"
          :data="list"
          size="small"
          style="height: 350px;"
          max-height="350px"
          @select="handlerChange"
          @select-all="handlerAll"
          @selection-change="updateSelect"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="materialBatch" label="物料批次号" />
          <el-table-column prop="materialCode" label="物料编号" />
          <el-table-column prop="materialDescription" label="物料描述" />
          <el-table-column prop="isAssigned" label="已经被分配出库" />
          <el-table-column prop="storageCode" label="储位编码" />
          <el-table-column prop="warehouseZonesType" label="厂区" />
          <!-- <el-table-column prop="containerId" label="容器ID" /> -->
          <el-table-column prop="containerCode" label="容器编码" />
          <el-table-column prop="qty" label="数量" />
          <el-table-column prop="frozenStatus" label="冻结状态">
            <template slot-scope="scope">
              {{ dict.label.semi_frozen[scope.row.frozenStatus] }}
            </template>
          </el-table-column>
          <el-table-column prop="status" label="物料状态">
            <template slot-scope="scope">
              {{ dict.label.semi_material_status[scope.row.inventoryStatus] }}
            </template>
          </el-table-column>
          <!-- <el-table-column prop="startPullTime" label="开始接料时间" />
          <el-table-column prop="boxInboundTime" label="结箱入库时间" /> -->
          <el-table-column prop="sealCross" label="胶条截面" />
          <el-table-column prop="bladeHeight" label="刃高" />
          <el-table-column prop="shelfStatus" label="保质期状态">
            <template slot-scope="scope">
              {{ dict.label.semi_shelf_life_status[scope.row.shelfStatus] }}
            </template>
          </el-table-column>
          <el-table-column prop="weight" label="重量" />
          <el-table-column prop="productionDate" label="生产时间" />
          <el-table-column prop="inboundTime" label="入库时间" />
        </el-table>
        <el-pagination
          :page-size.sync="query.size"
          :current-page.sync="query.current"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handlerSize"
          @current-change="handlerCurrent"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import { getInventoryListAPI, createDemandAPI } from '@/api/jtWork/jtCreateDemand'
export default {
  name: 'JtCreateDemand',
  dicts: ['semi_material_status', 'semi_container_status', 'semi_frozen', 'semi_shelf_life_status'],
  data() {
    return {
      query: {
        current: 1,
        size: 10
      },
      select_table: [],
      list: [],
      orderType: '',
      orderTypeList: [
        { label: 'AGV生产叫料出库', value: 1 },
        { label: '质检出库', value: 2 },
        { label: '返工出库', value: 3 },
        { label: '合箱出库', value: 4 },
        { label: '盘点出库', value: 5 }
      ],
      priorityList: [
        { label: 1, value: 1 },
        { label: 2, value: 2 },
        { label: 3, value: 3 },
        { label: 4, value: 4 },
        { label: 5, value: 5 },
        { label: 6, value: 6 },
        { label: 7, value: 7 },
        { label: 8, value: 8 },
        { label: 9, value: 9 },
        { label: 10, value: 10 }
      ],
      priority: '',
      total: 0,
      loading: false,
      btn: {
        create: false
      }
    }
  },
  mounted() {
    this.toQuery()
  },
  methods: {
    toQuery() {
      this.query.current = 1
      this.getList()
    },
    async getList() {
      try {
        this.loading = true
        const res = await getInventoryListAPI(this.query)
        this.list = res.content
        this.total = res.totalElements
        console.log(this.total)
        this.select_table.forEach(item => {
          this.$nextTick(() => {
            this.list.find(obj => {
              if (item.containerCode === obj.containerCode) {
                this.$refs.table.toggleRowSelection(obj, true)
              }
            })
          })
        })
      } finally {
        this.loading = false
      }
    },
    reset() {
      this.query = {
        current: 1,
        size: 10
      }
      this.getList()
    },
    handlerSize(newSize) {
      this.query.size = newSize
      this.query.current = 1
      this.getList()
    },
    handlerCurrent(newCurrent) {
      this.query.current = newCurrent
      this.getList()
    },
    handlerChange(selection, row) {
      let a = 0
      selection.forEach(v => {
        if (v.containerCode !== row.containerCode) {
          a++
        }
      })
      if ((a !== 0 && selection.length !== 0) || (a === 0 && selection.length === 0)) {
        this.select_table.forEach((v, index) => {
          if (v.containerCode === row.containerCode) {
            this.select_table.splice(index, 1)
          }
        })
      }
    },
    handlerAll(val) {
      if (val.length === 0) {
        const set2 = new Set(this.list.map(v => v.containerCode))
        const a = this.select_table.map(v => v.containerCode).filter(item => !set2.has(item))
        const b = this.select_table.filter(v => a.includes(v.containerCode))
        this.select_table = b
      }
    },
    updateSelect(val) {
      for (var i = 0; i < val.length; i++) {
        const n = {
          materialCode: val[i].materialCode,
          materialBatch: val[i].materialBatch,
          materialDescription: val[i].materialDescription,
          containerId: val[i].containerId,
          containerCode: val[i].containerCode,
          qty: val[i].qty,
          frozenStatus: val[i].frozenStatus,
          status: val[i].status,
          startPullTime: val[i].startPullTime,
          sealCross: val[i].sealCross,
          bladeHeight: val[i].bladeHeight,
          shelfStatus: val[i].shelfStatus,
          weight: val[i].weight,
          productionDate: val[i].productionDate,
          inboundTime: val[i].inboundTime
        }
        if (this.select_table.length === 0) {
          this.select_table.push(n)
        } else {
          let a = 0
          for (var j = 0; j < this.select_table.length; j++) {
            if (this.select_table[j].containerCode === val[i].containerCode) {
              a++
            }
          }
          if (a < 1) {
            this.select_table.push(n)
          }
        }
      }
    },
    delItem(row, index) {
      this.select_table.splice(index, 1)
      this.$nextTick(() => {
        this.list.find(obj => {
          if (obj.containerCode === row.containerCode) {
            this.$refs.table.toggleRowSelection(obj, false)
          }
        })
      })
    },
    async createDemandOrder() {
      const submitForm = {
        containerCodes: this.select_table.map(item => item.containerCode),
        demandOrderType: this.orderType,
        priority: this.priority
      }
      console.log(submitForm)
      try {
        this.btn.create = true
        const res = await createDemandAPI(submitForm)
        if (res.code === 200) {
          this.$message.success('创建需求单成功')
          this.$router.push('/semiWarehouse/jtOutManagement/jtDemandOrder')
        } else {
          this.$message.warning(res.message)
        }
      } finally {
        this.btn.create = false
      }
    }
  }
}
</script>

<style scoped lang="scss">
.head-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
</style>
